<template>
  <div class="l-box" v-if="list.length>0">
    <div class="tip-b" v-for="(el,i) in list" :key="i" :style="`top:${el.po.y}px;left:${el.po.x-100}px`">
      <div class="flex">
        <div>
          <img
            src="../assets/tem-img.png"
            alt=""
            style="width: 16px; height: 16px"
          />
          <i class="val">{{el.data.temp || 20}}℃</i>
        </div>
        <div>
          <img
            src="../assets/hum-img.png"
            alt=""
            style="width: 16px; height: 16px"
          />

          <i class="val">{{el.data.hum || 49}}%</i>
        </div>
      </div>
      <div class="flex">
        <span>PM2.5</span><span><i class="val">{{el.data.pm25 || 60}}</i>ug/m³</span>
      </div>
      <div class="flex">
        <span>甲醛</span><span><i class="val">{{el.data.ch2o/1000 || 0.08}}</i>mg/m³</span>
      </div>
      <div class="flex">
        <span>CO₂</span><span><i class="val">{{el.data.co2 || 0.08}}</i>ppm</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ModelByVueTipbox",
  props: {
  },
  data() {
    return {
      list: []
    };
  },
  mounted() {
    
  },
  methods: {
    init(list){
      console.log(list, "空气质量数据");
      this.list = list
    }
  },
};
</script>

<style scoped>
.l-box {
  width: 20px;
  height: 20px;
  background-color: #fff;
  position: relative;
}
.tip-b {
  line-height: 18px;
  min-width: 120px;
  padding: 5px 8px;
  border-radius: 12px;
  font-size: 12px;
  position: fixed;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 1000;
  /* background: linear-gradient(180deg, #FFFFFF 0%, #75C7FF 100%); */
  background-color: rgba(0, 0, 0, 0.7);
}
.val {
  font-size: 18px;
  padding-right: 5px;
  color: aqua;
}
</style>
